import { fetchList, handleAction } from ".";
import { labelStatusMap, labelTypeMap } from "./dict";
import { tableActiveKey, columns, defaultDataSource } from "./store";
export const tableLoading = ref(false);
export const tablePage = renderTablePage();
const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const renderType = () => (
    <div>
      <i>{selectDictLabel(labelTypeMap, value)}</i>
    </div>
  );
  const renderPersonNum = () => (
    <div>
      <i>{+value === 0 ? undefined : value}</i>
    </div>
  );
  const renderStatus = () => (
    <div>
      <i class={record.status === 0 ? "s-52c41a" : "s-c1c1c1"}>
        {selectDictLabel(labelStatusMap, record.status == 0 ? 0 : 1)}
      </i>
    </div>
  );
  const renderAction = () => {
    const updateLabelMap = {
      0: "labelApi.update",
      1: "labelApi.updateG",
    };
    const deleteLabelMap = {
      0: "labelApi.delete",
      1: "labelApi.deleteG",
    };
    const basicUpdateNode = (
      <div class="s-table-body_cell">
        {renderUpdate.call({
          record,
          handleAction,
          identify: updateLabelMap[number],
        })}
        <a-divider type="vertical" />
      </div>
    );
    const basicDeleteNode = (
      <div class="s-table-body_cell">
        {renderDelete.call({
          record,
          handleAction,
          identify: deleteLabelMap[number],
        })}
        <a-divider type="vertical" />
      </div>
    );
    if (number === 0)
      return (
        <div>
          {withDirectivePower({
            vNode: basicUpdateNode,
            bindingValue: "labelApi.update",
          })}
          {+record.personNum === 0 ? (
            <>
              {withDirectivePower({
                vNode: basicDeleteNode,
                bindingValue: "labelApi.delete",
              })}
            </>
          ) : null}
          {withDirectivePower({
            vNode: renderDisable.call({
              record,
              handleAction,
              identify: "labelApi.updateStatus",
            }),
            bindingValue: "labelApi.updateStatus",
          })}
        </div>
      );

    return (
      <div>
        {withDirectivePower({
          vNode: basicUpdateNode,
          bindingValue: "labelApi.updateG",
        })}
        {withDirectivePower({
          vNode: basicDeleteNode,
          bindingValue: "labelApi.deleteG",
        })}
        {withDirectivePower({
          vNode: renderDetail.call({
            record,
            handleAction,
            identify: "labelApi.selectDataByIdG",
          }),
          bindingValue: "labelApi.selectDataByIdG",
        })}
      </div>
    );
  };
  return new Map([
    [{ key: "index", state: /[01]/ }, renderIndex],
    [
      { key: "tag_name", state: /[0]/ },
      renderToolTip.bind({ value, length: 6 }),
    ],
    [{ key: "type", state: /[01]/ }, renderType],
    [
      { key: "explain", state: /[0]/ },
      renderToolTip.bind({ value, length: 8 }),
    ],
    [{ key: "personNum", state: /[0]/ }, renderPersonNum],
    [{ key: "status", state: /[0]/ }, renderStatus],
    [
      { key: "attr_name", state: /[1]/ },
      renderToolTip.bind({ value, length: 6 }),
    ],
    [{ key: "remark", state: /[1]/ }, renderToolTip.bind({ value, length: 8 })],
    [{ key: "action", state: /[01]/ }, renderAction],
  ]);
};

const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  const _this = { number, tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};
export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns,
    dataSource: defaultDataSource[0],
    tableSlot: {
      headerCell: ({ title, column }: any) => {
        if (column.key === "type") {
          return (
            <>
              <div class="s-table-header_cell" style="column-gap: 5px">
                <i>{title}</i>
                <tips-cell
                  content={[
                    `1.${$t("label7")}`,
                    `2.${$t("label8")}`,
                    `3.${$t("label9")}`,
                  ]}
                />
              </div>
            </>
          );
        }
        return <div class="s-table-header_cell">{title}</div>;
      },
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
    },
  };

  return defineTable;
};
